<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<base href="${pageContext.request.contextPath}/xiao">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#select').blur(function() {
			var select = document.getElementById("select").value;
			if (select == 'jsp/a3.jsp') {

				getSelect3(select)
			}

			if (select == 'jsp/a2.jsp') {

				getSelect2(select)
			}

			if (select == 'jsp/a.jsp') {

				getSelect(select)
			}
		})

	})

	function getSelect(select) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energy/getSelect.action',
			data : 'select=' + select,
			success : function(data) {
				showEnergy()
			}
		})
	}

	function getSelect2(select) {

		$.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/energyYear/getSelect.action',
					data : 'select=' + select,
					success : function(data) {

						showenergyYear()
					}
				})
	}
	function getSelect3(select) {
		$.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/energyYear/getSelect.action',
					data : 'select=' + select,
					success : function(data) {
						showenergyYear()
					}
				})
	}
	function showAll() {

		$.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/energyYear/setList.action',
					success : function(data) {
						showenergyYear()
						
					}
				});

	}

	function showenergyYear() {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energyYear/showList.action',
			success : function(data) {
				$("#main-content").html(data);
			}
		});
		//window.location.href = "${pageContext.request.contextPath}/energyYear/showList.action";
	}

	function showAll2() {

		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energy/setList.action',
			success : function(data) {
				showEnergy()
			}
		})
	}

	function showEnergy() {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energy/showList1.action',
			success : function(data) {
				$("#main-content").html(data);
			}
		})
		//window.location.href = "${pageContext.request.contextPath}/energy/showList1.action";
	}

	function calculateAll() {

		$.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/energyYear/calculate.action',
					success : function(data) {

						if (data == 1) {
							alert('数据库同步成功！')
						}
					}
				})
	}

	function calMonth() {

		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/dayYear/calMonth.action',
			success : function(data) {

				calculateAll()
			}
		})
	}
	
	function updateYear(id) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energy/updateThis.action',
			data : {
				id : id
			},
			success : function(data) {

				$("#updateYear").html(data);
			}
		});
	}
		
	function updateMonth(id) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/energy/updateThis.action',
			data : {
				id : id
			},
			success : function(data) {

				$("#updateMonth").html(data);
			}
		});
	}
</script>
</head>
<body>
	<div class="row">
	 <div class="col-md-12">
	     <!--breadcrumbs start -->
	     <ul class="breadcrumb">
	         <li><a href="index.jsp">能源管理系统</a>
	         </li>
	         <li>能源管控</li>
	         <li><a href="javascript:void(0);">能源总览</a></li>
	     </ul>
	<div id="container" style="width: 1500px; height: 330px;">
		<div id="table" style="width: 1000px; height: 250px;">

			<button onclick="showAll()">年度能源消耗</button>
			&nbsp;
			<button style="color: red;" onclick="calMonth()">数据库一键同步</button>
			<table id="updateYear" cellspacing="0" cellpadding="0" width="1000px"
				style="text-align: center; border: solid 1px #FF8247;">
				<tr>
					<td>能源类别（柱状图）</td>
					<td>Jan</td>
					<td>Feb</td>
					<td>Mar</td>
					<td>Apr</td>
					<td>May</td>
					<td>June</td>
					<td>July</td>
					<td>Aug</td>
					<td>Sep</td>
					<td>Oct</td>
					<td>Nov</td>
					<td>Dec</td>
					<td>Year</td>
					<td>Operate</td>
				</tr>
				<c:forEach items="${energyYearList}" var="year">
					<tr>
						<td>${year.name}</td>
						<td>${year.jan}</td>
						<td>${year.feb}</td>
						<td>${year.mar}</td>
						<td>${year.apr}</td>
						<td>${year.may}</td>
						<td>${year.jun}</td>
						<td>${year.july}</td>
						<td>${year.aug}</td>
						<td>${year.sep}</td>
						<td>${year.oct}</td>
						<td>${year.nov}</td>
						<td>${year.dec1}</td>
						<td>${year.year}</td>
						<td><a href="javascript:void(0);" onclick="updateYear(${year.id})">update</a></td>
					</tr>
				</c:forEach>
			</table>
			<br>

			<button onclick="showAll2()">月度能源消耗</button>
			<table id="updateMonth" cellspacing="0" cellpadding="0" width="1000px"
				style="text-align: center; border: solid 1px #FF8247;">
				<tr>
					<td>能源类别</td>
					<td>实际值（3D饼图）</td>
					<td>预算值(折线图)</td>
					<td>单价</td>
					<td>总费用</td>
					<td>实际值/预算值</td>
					<td>考核分</td>
					<td>开关</td>
					<td>是否控制</td>
					<td>是否超标</td>
					<td>Operate</td>
				</tr>
				<c:forEach items="${energyList}" var="year">
					<tr>
						<td>${year.name}</td>
						<td>${year.actual}</td>
						<td>${year.predict}</td>
						<td>${year.unit}</td>
						<td>${year.totalMoney}</td>
						<td>${year.percent}</td>
						<td>${year.score}</td>
						<td>${year.swift}</td>
						<td>${year.iscontrol}</td>
						<td>${year.isover}</td>
						<td><a href="javascript:void(0);" onclick="updateMonth(${year.id})">update</a></td>
					</tr>
				</c:forEach>
			</table>

		</div>
		<br>
		<hr>
		<div id="pic">

			<select id="select" name="select">
				<option value="jsp/a.jsp">3D环形图</option>
				<option value="jsp/a2.jsp">动态柱状图</option>
				<option value="jsp/a3.jsp">折线图</option>
			</select>
		</div>


	</div>

	<iframe src="${option}" id="myiframe" scrolling="no" frameborder="0"
		style="width: 1000px; height: 1000px;">这是A</iframe>
	</div>
	</div>
</body>
</html>